<template>
    <div>
        <div class="com_box mt_12 pd_20">
            <span class="font_16 color_01">数据汇总</span>
            <div class="consume_count flexbox flexcenter mt_20">
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 14.6663C10.7614 14.6663 13 12.4278 13 9.66634C13 4.99967 8 1.33301 8 1.33301C8 1.33301 3 4.99967 3 9.66634C3 12.4278 5.23857 14.6663 8 14.6663Z" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M3 9.66661C3 12.428 5.23857 14.6666 8 14.6666C10.7614 14.6666 13 12.428 13 9.66661C13 9.66661 10 10.6666 8 9.66661C6 8.66661 3 9.66661 3 9.66661Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.2" stroke-linejoin="round" />
                        </svg>
                        <span>总消耗</span>
                    </div>
                    <div class="consume_num">
                        {{countData.stat_cost}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.5 2C5.1863 2 2.5 4.6863 2.5 8C2.5 11.3137 5.1863 14 8.5 14C11.8137 14 14.5 11.3137 14.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 5C6.84313 5 5.5 6.34313 5.5 8C5.5 9.65687 6.84313 11 8.5 11C10.1569 11 11.5 9.65687 11.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 7.99988L10.6 5.89795" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M10.6001 3.8088V5.9H12.7085L14.5001 4.10007H12.4012V2L10.6001 3.8088Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linejoin="round" />
                        </svg>
                        <span>总消耗目标</span>
                    </div>
                    <div class="consume_num">
                        {{countData.target_cost}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.5 2C5.1863 2 2.5 4.6863 2.5 8C2.5 11.3137 5.1863 14 8.5 14C11.8137 14 14.5 11.3137 14.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 5C6.84313 5 5.5 6.34313 5.5 8C5.5 9.65687 6.84313 11 8.5 11C10.1569 11 11.5 9.65687 11.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 7.99988L10.6 5.89795" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M10.6001 3.8088V5.9H12.7085L14.5001 4.10007H12.4012V2L10.6001 3.8088Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linejoin="round" />
                        </svg>
                        <span>每日剩余总目标任务</span>
                    </div>
                    <div class="consume_num">
                        {{countData.target_cost_remain}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.5 8C1.5 6.89543 2.39543 6 3.5 6H13.5C14.6046 6 15.5 6.89543 15.5 8C15.5 9.10457 14.6046 10 13.5 10H3.5C2.39543 10 1.5 9.10457 1.5 8Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.2" />
                            <path d="M4.49981 6.6971L4.49988 9.19722M6.99979 6.69699L6.99981 9.19722M9.49988 6.6971L9.49983 9.19732" stroke="white" stroke-width="1.2" stroke-linecap="round" />
                        </svg>
                        <span>完成总进度</span>
                    </div>
                    <div class="consume_num flexbox flexcenter">
                        <el-progress type="circle" style="margin-right:5px" width="26" color="#4475ff" :percentage="countData.progress" stroke-width="4" :show-text="false"></el-progress>
                        {{countData.progress}}%
                    </div>
                </div>
            </div>
            <div class="consume_count mt_12 flexbox flexcenter">
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.6001 7.96399L4.44374 7.10779L7.57295 8.46351L5.08406 9.2487L1.6001 7.96399ZM5.15485 5.68106L7.99849 4.82567L11.1277 6.18139L8.63881 6.96657L5.15485 5.68106ZM8.42564 3.2561L11.2693 2.3999L14.3985 3.75562L11.9096 4.54081L8.42644 3.2561H8.42564ZM5.01247 13.5999L7.57214 12.7445V8.4627L5.08406 9.24789L5.01166 13.5991L5.01247 13.5999ZM8.56802 12.3152L11.1285 11.459V6.18139L8.64042 6.96657L8.56802 12.3152ZM11.8396 11.1749L14.4001 10.3187V3.75562L11.9112 4.54081L11.8388 11.1741L11.8396 11.1749Z" fill="#4475FF" />
                        </svg>
                        <span>千川直播</span>
                    </div>
                    <div class="consume_num">
                        {{countData.stat_cost_qclive}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.6001 7.96399L4.44374 7.10779L7.57295 8.46351L5.08406 9.2487L1.6001 7.96399ZM5.15485 5.68106L7.99849 4.82567L11.1277 6.18139L8.63881 6.96657L5.15485 5.68106ZM8.42564 3.2561L11.2693 2.3999L14.3985 3.75562L11.9096 4.54081L8.42644 3.2561H8.42564ZM5.01247 13.5999L7.57214 12.7445V8.4627L5.08406 9.24789L5.01166 13.5991L5.01247 13.5999ZM8.56802 12.3152L11.1285 11.459V6.18139L8.64042 6.96657L8.56802 12.3152ZM11.8396 11.1749L14.4001 10.3187V3.75562L11.9112 4.54081L11.8388 11.1741L11.8396 11.1749Z" fill="#4475FF" />
                        </svg>
                        <span>千川短视频</span>
                    </div>
                    <div class="consume_num">
                        {{countData.stat_cost_qcvideo}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2.11128 7.6288L4.47491 7.0379L2.98229 11.5455H0.618652L2.11128 7.6288Z" fill="#4475FF" />
                            <path d="M9.81734 2.09091L12.181 1.5L9.22643 11.5455H6.86279L9.81734 2.09091Z" fill="#4475FF" />
                            <path d="M4.95202 13.318C4.95202 13.9707 4.4229 14.4999 3.7702 14.4999C3.1175 14.4999 2.58838 13.9707 2.58838 13.318C2.58838 12.6653 3.1175 12.1362 3.7702 12.1362C4.4229 12.1362 4.95202 12.6653 4.95202 13.318Z" fill="#4475FF" />
                            <path d="M10.8611 13.318C10.8611 13.9707 10.332 14.4999 9.67929 14.4999C9.02659 14.4999 8.49747 13.9707 8.49747 13.318C8.49747 12.6653 9.02659 12.1362 9.67929 12.1362C10.332 12.1362 10.8611 12.6653 10.8611 13.318Z" fill="#4475FF" />
                            <path d="M12.3743 3.82324L14.0739 3.82327C14.571 3.82328 14.974 4.22623 14.974 4.72332V4.72332C14.9741 5.22044 14.5711 5.62346 14.0739 5.62346H12.0195L12.3743 3.82324Z" fill="#4475FF" />
                            <path d="M11.8135 6.5026L15.6001 6.50247C16.0972 6.50245 16.5001 6.90537 16.5001 7.40239V7.40239C16.5001 7.89939 16.0972 8.3023 15.6002 8.30231L11.439 8.30244L11.8135 6.5026Z" fill="#4475FF" />
                            <path d="M11.1546 9.18164L13.4538 9.18186C13.9508 9.1819 14.3536 9.58479 14.3536 10.0817V10.0817C14.3536 10.5787 13.9507 10.9816 13.4537 10.9816H10.8082L11.1546 9.18164Z" fill="#4475FF" />
                            <path d="M6.13366 4.45468L8.49729 3.86377L6.13366 11.5456H3.77002L6.13366 4.45468Z" fill="#4475FF" />
                        </svg>
                        <span>随心推</span>
                    </div>
                    <div class="consume_num">
                        {{countData.free_cost}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.84272 2.91895L8.62746 5.58706H2.36914L3.1735 2.91895H7.84272Z" fill="#4475FF" />
                            <path d="M3.80091 6.07715L6.48867 6.72456L3.36931 12.1393L1.46631 10.1186L3.80091 6.07715Z" fill="#4475FF" />
                            <path d="M4.50732 11.1584L6.41032 9.1377L9.54929 14.5524L6.84192 15.1998L4.50732 11.1584Z" fill="#4475FF" />
                            <path d="M13.9242 13.0616H9.25498L8.47021 10.4131H14.7286" fill="#4475FF" />
                            <path d="M15.6312 5.86146L13.2966 9.92249L10.6089 9.27508L13.7282 3.86035" fill="#4475FF" />
                            <path d="M12.5903 4.84123L10.6873 6.86194L7.54834 1.4276L10.2557 0.799805L12.5903 4.84123Z" fill="#4475FF" />
                        </svg>
                        <span>巨量短视频</span>
                    </div>
                    <div class="consume_num">
                        {{countData.stat_cost_advideo}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12.3983" cy="7.70297" r="1.68735" fill="#4475FF" />
                            <ellipse cx="11.0575" cy="4.62682" rx="1.47643" ry="1.47643" fill="#4475FF" />
                            <ellipse cx="11.0575" cy="10.8026" rx="1.47643" ry="1.47643" fill="#4475FF" />
                            <circle cx="8.91794" cy="2.93747" r="1.11325" fill="#4475FF" />
                            <ellipse cx="7.21906" cy="4.78498" rx="0.76105" ry="0.76105" fill="#4475FF" />
                            <ellipse cx="8.67853" cy="10.7606" rx="0.76105" ry="0.76105" fill="#4475FF" />
                            <ellipse opacity="0.5" cx="4.73475" cy="2.45008" rx="0.701059" ry="0.701059" fill="#4475FF" />
                            <ellipse opacity="0.5" cx="7.26307" cy="13.3964" rx="0.701059" ry="0.701059" fill="#4475FF" />
                            <circle cx="6.62051" cy="2.65469" r="1.05459" fill="#4475FF" />
                            <ellipse cx="9.04873" cy="12.6659" rx="1.05459" ry="1.05459" fill="#4475FF" />
                            <ellipse opacity="0.5" cx="5.17928" cy="4.12264" rx="0.899981" ry="0.89998" fill="#4475FF" />
                            <circle opacity="0.5" cx="7.01766" cy="11.7022" r="0.899981" fill="#4475FF" />
                        </svg>
                        <span>UD短视频</span>
                    </div>
                    <div class="consume_num">
                        {{countData.stat_cost_udvideo}}
                    </div>
                </div>
            </div>
            <div class="flexbox flexcenter flexbetween mt_20">
                <span class="font_16 color_01 ">消耗趋势</span>
                <svg width="32" height="32" :class="{'roleClass':is_show==false}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" @click="hideTime">
                    <path d="M15.6221 13.4364C15.8215 13.2062 16.1786 13.2062 16.378 13.4364L19.2836 16.7916C19.5641 17.1154 19.334 17.6189 18.9057 17.6189H13.0944C12.6661 17.6189 12.436 17.1154 12.7165 16.7916L15.6221 13.4364Z" fill="#616C85" />
                    <rect x="0.5" y="0.5" width="31" height="31" rx="1.5" stroke="#EBEBEB" />
                </svg>
            </div>
            <div class="data_chart" v-show="is_show">
                <div id="timeChart" style="height:384px;"></div>
            </div>
        </div>
        <div class="com_box mt_12 pd_20">
            <span class="font_16 color_01">消耗排行</span>
            <el-table :data="listData" class="com_table mt_20">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="" label="排名" width="100" align="center" fixed="left">
                    <template slot-scope="scope">
                        <template v-if="scope.$index==0">
                            <img src="../../assets/img/number_01.svg" alt="" class="rank_img">
                        </template>
                        <template v-else-if="scope.$index==1">
                            <img src="../../assets/img/number_02.svg" alt="" class="rank_img">
                        </template>
                        <template v-else-if="scope.$index==2">
                            <img src="../../assets/img/number_03.svg" alt="" class="rank_img">
                        </template>
                        <template v-else>
                            {{scope.$index+1}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="人员姓名" min-width="150" fixed="left">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <span class="text_head">{{scope.row.nickname | keepOneNumS}}</span>
                            {{scope.row.nickname}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="stat_cost_qcvideo" label="千川短视频" min-width="130">
                </el-table-column>
                <el-table-column prop="stat_cost_qclive" label="千川直播" min-width="130">
                </el-table-column>
                <el-table-column prop="stat_cost_advideo" label="巨量短视频" min-width="140">
                </el-table-column>
                <el-table-column prop="stat_cost_udvideo" label="UD短视频" min-width="140">
                </el-table-column>
                <el-table-column prop="free_cost" label="随心推" min-width="140">
                </el-table-column>
                <el-table-column prop="target_cost" label="消耗目标" min-width="150">
                </el-table-column>
                <el-table-column prop="target_cost_remain" label="每日剩余目标任务" min-width="160">
                </el-table-column>
                <el-table-column prop="progress" label="完成进度" width="170">
                    <template slot-scope="scope">
                        <el-progress stroke-width="8" :percentage="scope.row.progress | keepNone" color="#4475FF"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column prop="stat_cost" label="总消耗" min-width="140">
                    <template slot-scope="scope">
                        <span class="cost_font">{{scope.row.stat_cost}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="data" label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="toDetails(scope.row)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import monthdate from '../../assets/js/getmonth'
export default {
    props:['queryInfo'],
    name: "",
    data() {
        return {
            is_show: false,
            countData: {},
            listData: [],
            x_data:monthdate.currentMonthDays(),
            y_data:[]
        };
    },
    created() {
        
    },
    mounted() {
        
    },
    methods: {

        // 获取优化师数据
        getData(data) {
            this.countData = data.total;
            this.listData = data.list;
        },

        // 获取趋势
        getTime(data,year,month){
            this.y_data = []
            let day = monthdate.currentMonthDays(year,month)
            this.x_data = monthdate.currentMonthDays(year,month)
            for(let i in day){
                let date = data.filter(item=>{ return item.batch_num==day[i]}).map(item=>{return item.batch_num}).toString()
                let val = data.filter(item=>{ return item.batch_num==day[i]}).map(item=>{return item.total_cost}).toString()
                if(day[i]==date){
                    this.y_data.push(val)
                }else{
                    this.y_data.push(0)
                }
            }
            if(this.is_show){
                this.$nextTick(()=>{
                    this.timeChart();
                })
            }
        },

        // 显示隐藏趋势
        hideTime(){
            this.is_show = !this.is_show
            if(this.is_show){
                this.$nextTick(()=>{
                    this.timeChart();
                })
            }
        },

        // 时间曲线数据图表
        timeChart() {
            const myChart = this.$echarts.init(
                document.getElementById("timeChart")
            );
            var option = {
                color: ["#4475FF"],
                title: {},
                grid: {
                    left: "2%",
                    right: "2%",
                    bottom: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#616c8599",
                            width: 0,
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(97, 108, 133, 0.6)",
                        },
                    },
                    data: this.x_data,
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "rgba(97, 108, 133, 0.2)",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(97, 108, 133, 0.6)",
                        },
                    },
                },
                series: [
                    {
                        showSymbol: false,
                        name: "总消耗",
                        type: "line",
                        data: this.y_data,
                        lineStyle: {
                            color: "#4475FF",
                            width: 2,
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        toDetails(row) {
            this.$router.push({
                path: "/optcondetails",
                query: {
                    nickname:row.nickname,
                    author:row.author,
                    year:this.queryInfo.year,
                    month:this.queryInfo.month,
                },
            });
        },
    },
    components: {},
};
</script>


<style scoped>
.roleClass{
    transform: rotate(-180deg);
}
</style>



